<template>
  <div class="popover">
    <div class="head">
      <img 
        slot="cover"
        referrerPolicy='no-referrer'
        height="40"
        :src="url"
      />
      <span class="name">{{name}}</span>
    </div>
    <div class="requirements" v-if="requirements"
      v-bind="requirements"
      >
      合成所需:{{requirements}}
    </div>
    <div class="attrib" v-html="attrib"/>
    <div class="desc" v-html="desc"/>
    <p class="notes" v-if="notes">{{notes}}</p>
    <p class="mc" v-if="mc">魔法:{{mc}}</p>
    <p class="cd" v-if="cd">冷却:{{cd}}s</p>
    <p class="lore">{{lore}}</p>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  url:String,
  name:String,
  lore:String,
  attrib:String,//属性
  desc:String,//描述
  notes:String,
  mc:String,
  cd:String,
  requirements:String 
})
</script>

<style lang="less" scoped>
.popover{
  // background-color: aquamarine;
  max-width: 250px;
}
.name{
  margin-left: 16px;
  font-size: 16px;
}
.attrib{
  margin-top: 10px;
}
.desc{
  margin-top: 10px;
}
.lore{
  margin-top: 10px;
  font-size: 12px;
}
.notes{
  font-size: 14px;
}
.mc{
  font-size: 14px;
}
.cd{
  font-size: 14px;
}
.requirements{
  margin-top: 10px;
}
</style>